<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    #about-rainbow path {
      mask: url(#mask);
    }
    svg {
      overflow: hidden;
      vertical-align: middle;
    }
    .ldBar {
      position: relative;
    }

    .ldBar.label-center > .ldBar-label {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-shadow: 0 0 3px #fff;
    }

    .ldBar-label:after {
      content: "%";
      display: inline;
    }

    .ldBar.no-percent .ldBar-label:after {
      content: "";
    }
  </style>
  <body>
    <div class="col-sm-4">
      <div
        class="ldBar auto label-center mx-auto"
        id="about-rainbow"
        style="height: 160px; margin-top: -9px; width: 205px"
        data-type="stroke"
        data-stroke-trail-width="15"
        data-stroke-width="15"
        data-stroke="url(#p)"
        data-path="M40 150A80 80 0 1 1 140 150"
      >
        <svg
          xmlns:xlink="http://www.w3.org/1999/xlink"
          preserveAspectRatio="xMidYMid"
          width="100%"
          height="100%"
          viewBox="-12.499993324279785 -14.94997501373291 205.00001525878906 187.44998168945312"
        >
          <defs>
            <filter
              id="ldBar-d282c99de05f5-filter"
              x="-1"
              y="-1"
              width="3"
              height="3"
            >
              <feMorphology operator="dilate" radius="3"></feMorphology>
              <feColorMatrix
                values="0 0 0 0 1    0 0 0 0 1    0 0 0 0 1    0 0 0 1 0"
                result="cm"
              ></feColorMatrix>
            </filter>
            <mask id="ldBar-d282c99de05f5-mask">
              <image
                xlink:href=""
                filter="url(#ldBar-d282c99de05f5-filter)"
                x="0"
                y="0"
                width="100"
                height="100"
                preserveAspectRatio="xMidYMid"
              ></image>
            </mask>
            <g>
              <mask id="ldBar-d282c99de05f5-mask-path">
                <path
                  d="M40 150A80 80 0 1 1 140 150"
                  fill="#fff"
                  stroke="#fff"
                  filter="url(#ldBar-d282c99de05f5-filter)"
                ></path>
              </mask>
            </g>
            <clipPath id="ldBar-d282c99de05f5-clip">
              <rect class="mask" fill="#000"></rect>
            </clipPath>
            <pattern
              id="ldBar-d282c99de05f5-pattern"
              patternUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="300"
              height="300"
            >
              <image x="0" y="0" width="300" height="300"></image>
            </pattern>
          </defs>
          <g>
            <path
              d="M40 150A80 80 0 1 1 140 150"
              fill="none"
              class="baseline"
              stroke="#ddd"
              stroke-width="15"
            ></path>
          </g>
          <g>
            <path
              d="M40 150A80 80 0 1 1 140 150"
              class="mainline"
              clip-path=""
              fill="none"
              stroke-width="15"
              stroke="url(#p)"
              stroke-dasharray="169.69817199707032 225.94873962402346"
            ></path>
          </g>
        </svg>
        <div class="ldBar-label">43</div>
      </div>
      <svg height="0">
        <mask id="mask">
          <path
            d="M40 150A80 80 0 1 1 140 150"
            stroke-width="15"
            stroke="#fff"
            stroke-dasharray="3 6"
          ></path>
        </mask>
        <pattern id="p" width="200" height="200" patternUnits="userSpaceOnUse">
          <image
            href="/assets/img/p/progress/rainbow.png"
            width="200"
            height="200"
          ></image>
        </pattern>
      </svg>
    </div>
  </body>
  <script>
    let a = undefined;
    console.log(a || "ss");
  </script>
</html>
